<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性节点的crud</title>
    <script type="text/javascript">
        function method01(){
            //获取所要添加属性的元素节点
            var divElement=document.getElementById('mydiv');
            //通过相应的方法添加属性
            divElement.setAttribute('key01','value01');
        }
        function method02(){
            //获取所有操作的元素节点
            var divElement=document.getElementById('mydiv');
            //通过相应的方法获取属性
            var idArribute=divElement.getAttribute('id');
            var key01Arribute=divElement.getAttribute('key01');
            console.log(idArribute);
            console.log(key01Arribute);
        }
        function method03(){
            //获取所有操作的元素节点
            var divElement=document.getElementById('mydiv');
            //通过相应的方法见修改
            divElement.setAttribute('key01','value02');
        }
        function method04(){
            //获取所有操作的元素节点
            var divElement=document.getElementById('mydiv');
            //通过相应的方法去删除属性
            divElement.removeAttribute('key01');
        }
    </script>
</head>
<body>
<div id="mydiv">我是div标签</div><br>
<button onclick="method01()">添加属性</button>
<button onclick="method02()">获取属性</button>
<button onclick="method03()">修改属性</button>
<button onclick="method04()">删除属性</button>
</body>
</html>